//角色新增页面
import React, { useState } from 'react';
import { Button, Divider,Input,Row, notification } from 'antd';
import { SaveOutlined } from '@ant-design/icons';
import useStore from '../../../components/useStore'
import request from '../../../untils/request';

const AddRoleForm = () => {//新增角色

    const { collapsed } = useStore();
    const [role,setrole]=useState({
        role_name:""
    })

    const getRoleName=(e)=>{//获取角色名称
        setrole({
            ...role,
            role_name:e.target.value
        })
    }

    const addRole=()=>{//用户新增一个角色（超级管理员与系统运维人员才可添加新角色）
        if(!/^[\u4e00-\u9fa5]{2,20}$/.test(role.role_name)){
            notification.open({
                message:"角色名称不合要求"
            })
            return
        }
        request("/admin/role/addRole", {
            method: 'POST',
            mode: 'cors',
            body:role
        }).then(data => {
            if(data.code==200){
                notification.success({
                    message:data.msg
                })
            } else {
                notification.error({
                    message:data.msg
                })
            }
        });
    }

    return (
        <div style={{    height: "94%", backgroundColor: `#F1F1F1`,right:"1%",top:"4vh",overflow:"hidden",
        backgroundSize: "100% 100%", width: collapsed?"94%":"84%", position: "absolute",  color: "white", fontSize: "0.8rem"}}>
            <div style={styles.kshcontainer}>
                <div style={{
                    fontSize: "0.7rem", position: "relative", width: "96%", marginLeft: "2%", backgroundColor: "", display: "flex",
                    textIndent: "1rem", justifyContent: "flex-start", alignContent: "flex-start", flexWrap: "wrap"
                }}>
                    <text style={{fontSize:"larger"}}>以下所填写的内容均有长度限制！新增的角色名称不得与已有的名称重复。</text>
                    <Divider/>
                </div>
                <br />
                <Row style={{width: collapsed?"94%":"84%",marginLeft:"2rem"}}>
                    <text>角色名称</text>
                    <Input maxLength={20} showCount onChange={getRoleName} placeholder='请输入角色名称'/>
                </Row>
                <Button type="primary" onClick={addRole}
                style={{ width: "6rem", height: '1.7rem', fontSize: "0.7rem", borderRadius: "5px", marginTop: "0.6rem",marginLeft:"2rem" }}>
                <SaveOutlined />新增</Button>
                <Divider></Divider>
            </div>
        </div>
    )
}

export default AddRoleForm

var styles = {
    maincontainer: {
        height: "100vh", 
        backgroundColor: `white`,
        backgroundSize: "100% 100%", 
        width: "100%", 
        position: "absolute", left: "0", 
        color: "white", 
        fontSize: "0.8rem"
    },
    topcontainer: {
        width: "100%", 
        height: "10vw", 
        backgroundImage: "linear-gradient(to bottom,#e4e5eb , white)", 
        paddingTop: "3vw",
        position: "relative", 
        fontSize: "0.89rem", 
        textIndent: "2rem", 
        fontWeight: "800", 
        color: "#a91f24", 
        borderRadius: "0 0 15px 15px"
    },
    butdcstyle: { paddingLeft:"1vw",
        paddingRight:"1vw",height: "2vw", 
        position: "absolute", 
        right: "1%", top: "0%", 
        backgroundColor: "#a91f24", 
        fontSize: "0.8vw", 
        borderRadius: "0.4rem", 
        borderRadius: "0 0 0.3vw 0.3vw" },
    butmainstyle: {
        paddingLeft:"1vw", 
        height: "2vw", 
        position: "absolute", 
        right: "6.5%", top: "0%", 
        backgroundColor: "#a91f24", 
        fontSize: "0.8vw", 
        borderRadius: "0.4rem", 
        borderRadius: "0 0 0.3vw 0.3vw" },
    butbackstyle: { 
        borderRadius: "0.4rem", 
        backgroundColor: "#a91f24", 
        height: "2vw", 
        position: "absolute", 
        right: "12%", top: "0%",
        fontSize: "0.8vw", 
        borderRadius: "0 0 0.3vw 0.3vw"},
    kshcontainer: {
        width: "98%", 
        height: "95%", 
        position: "absolute", top: "3%", 
        left: "1%", backgroundColor: "white", 
        color: "black",
        borderRadius: "10px",
    },
}